<template>
	<!-- 热门推荐组件 （注意：小组件头部） -->
	<view class="list-box">
		<view class="title space-between center">
			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
				<view class="all"  @click="toSearchPage" >
					<text >全部</text>
					<text class="iconfont icon-right"></text>
				</view>
		</view>
		<!-- 插槽 就是swiper组件内容 -->
		<slot></slot>
		
	</view>
</template>

	
<script>
	// import courseData from '@/mock/courseData.js'
	export default{
		props:{
			name:{	//标题
				type:String,
				default:''
			},
			word:{		//字符串HOT
				type:String,
				default:null
			},
			params:Object  // index 父组件传递过来的
		},
		data(){
			return{
				
			}
		},
		created() {
		},
		
		methods:{
			//跳转到搜索页  查询对应数据
			toSearchPage(){
			// console.log(this.params,'list-box')
			this.navTo(`/pages/search/search?params=${JSON.stringify(this.params)}`)
		// this.navTo(`/pages/search/search?params=${JSON.stringify(this.params)}`)
			}
		}
	}
</script>

<style lang="scss">
	.list-box{
		margin-top: 60rpx;
		.name{
			font-size: 38rpx;
			font-weight: 500;
			color: #303133;
			margin-right: 10rpx;
		}
		.word{
			font-size: 20rpx;
			background-image: linear-gradient(to right,#FB6932,#FA140E);
			color: #FFFFFF;
			padding: 0 10rpx;
			border-radius: 30rpx 30rpx 30rpx 0; //左上角  右上角  右下角
		}
		.all{
			font-weight: normal;
			color:grey;
			font-size: 28rpx;
			.iconfont{
				font-size:  20rpx;
			}
		}
	}
</style>
